<template>
	<view class="page">
		<view class="tishi_box" v-show="imgshow">
			<view class="tupian_zs_box">
				<image src="https://rubbish.lwjcg.com/static/index/tjx.png" mode="widthFix" />
				<view class="chahao_b" @click="closeTjx"></view>
			</view>
		</view>
		<!--  顶部宣传图 -->
		<view class="top_image_box">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" indicator-color="rgba(255, 255, 255, .4)"
				indicator-active-color="rgba(255, 255, 255, 1)" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in bannerList" :key="index" @click="banGo(item)">
					<image :src="item.pic_url" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>

			<view class="dress_box">
				<view class="dress_icon">
					<u-icon name="map-fill" color="#fff"></u-icon>
				</view>
				<view class="dress_text">
					{{ newcity == '' ? city : newcity }}
				</view>
			</view>
		</view>
		<view class="big_con_box">

			<view class="content_box">
				<!-- 拉的方式 -->
				<view class="Socratic_box">
					<image v-if="fdSelecdId == 1" src="https://rubbish.lwjcg.com/static/index/d.png" mode="scaleToFill" />
					<image v-else src="https://rubbish.lwjcg.com/static/index/f.png" mode="scaleToFill" />
					<view class="daizi_box" :class="'daizi_box_' + item.id" v-for="(  item, index  ) in   ldModeList  "
						:key="index" @click="fdSelecd(item)">
						<text :class="fdSelecdId == item.id ? 't_jicu' : ''">
							{{ item.id == '1' ? '拼车拉(按' + item.category_name + '计价)' : '整车拉(按' + item.category_name
			+ '计价)' }}
						</text>
						<view v-if="fdSelecdId == item.id" class="line_bnx"></view>
					</view>
				</view>
				<!-- 沿街 -->
				<!-- <view class="yanjie_box">
					<view v-if="fdSelecdId == 1" class="dange_jie_box" v-for="( item, index ) in  streetList "
						:key="index" @click="streetdBtn(item)">
						<text :class="streetdId == item.id ? 'yanjie_lv' : ''">{{ item.position_name }}</text>
					</view>
				</view> -->
				<!-- :class="fdSelecdId == 2 ? 'fsxz_box2' : ''" -->
				<view class="fsxz_box">
					<view class="dange_fl_box" v-for="( item, index ) in  zsfsList " :key="index"
						@click="modeBtn(item, index)">
						<view class="top_yuan_box" :class="zsfsId == item.id ? 'sel_top_yuan_box' : ''">
							<image :src="item.img_url" mode="scaleToFill" />
						</view>
						<view class="bot_fang_box" :class="zsfsId == item.id ? 'sel_bot_fang_box' : ''"
							:style="{ 'paddingTop': fdSelecdId == 1 ? '100rpx' : '86rpx' }">
							<view class="ds_mone_df_box" :class="zsfsId == item.id ? 'sel_ds_mone_df_box' : ''">
								<text class="money_icon" :class="zsfsId == item.id ? 'sel_money_icon' : ''">¥</text>
								{{ item.price * 1 }}
								<text class="daohuofang_box" :class="zsfsId == item.id ? 'sel_daohuofang_box' : ''">/{{
			item.category_name }}</text>
							</view>
							<view class="zhuang_mode_box" :class="zsfsId == item.id ? 'sel_zhuang_mode_box' : ''">
								{{ item.product_name }}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="frang_big_box" v-else>
					<view class="dange_one_box" v-for="(item, index) in zsfsList" :key="index" @click="modeBtn(item)">
						<view class="left_yuan_box" :class="zsfsId == item.id ? 'sel_left_yuan_box' : ''">
							<image :src="item.img_url" mode="scaleToFill" />
						</view>
						<view class="right_fang_box" :class="zsfsId == item.id ? 'sel_right_fang_box' : ''">
							<view class="right_top_box">
								<view class="right_qianshu_box"
									:class="zsfsId == item.id ? 'sel_right_qianshu_box' : ''">
									<text class="right_money_icon_box"
										:class="zsfsId == item.id ? 'sel_right_money_icon_box' : ''">¥</text>
									{{ item.price * 1 }}
									<text class="right_dhf_box"
										:class="zsfsId == item.id ? 'sel_right_dhf_box' : ''">/{{ item.category_name
										}}</text>
								</view>
								<view class="right_mode_zhuang_box"
									:class="zsfsId == item.id ? 'sel_right_mode_zhuang_box' : ''">{{ item.product_name
									}}</view>
							</view>
						</view>
					</view>
				</view> -->

				<view class="zhuyi_box" v-html="officialtext">

				</view>

				<view class="yugu_box">
					请输入您的预估{{ fdSelecdId == 1 ? '袋' : '车量' }}数：<input v-model="carvalue" type="digit"
						inputmode="decimal" @input="bindInput" @blur="bindBlur">
				</view>
				<!-- 车型 -->
				<template v-if="fdSelecdId != 1">
					<view class="motorcycle_box">
						<view class="tjText_box">
							为您安排车型：{{ vehObj.name }}
						</view>
						<view class="cc_box">
							<image :src="vehObj.img_url" mode="widthFix" />
						</view>
						<view class="xg_xt_box" @click="remodelBtn(vehObj)">
							查看证件
						</view>
					</view>
				</template>

				<view class="yongche_box">
					<view class="yue_box" @click="$noMultipleClicks(carModeBtn, item)">
						预约下单
					</view>

				</view>
				<view style="height: 20rpx;"></view>
			</view>

		</view>
		<!-- 拉新海报 -->
		<view class="poster_box" @click="sharePoster">
			<image src="https://build.lwjcg.com/uploads/invite.png" mode="widthFix" />
		</view>
		<!-- 近期用户 -->
		<view class="interest_box" v-if="circularizeList.length > 3">
			<swiper class="content" :vertical="true" :autoplay="true" :circular="true" :interval="2500"
				display-multiple-items="3">
				<swiper-item class="peop_big_box" v-for="(item, index) in circularizeList" :key="index">
					<view class="nterest_avater_box">
						<image :src="item.avatar" mode="scaleToFill" />
					</view>
					<view class="housan_box">
						<view class="nterest_name_box">
							{{ item.nickname }}
						</view>
						<view class="nterest_call_box">赚佣金{{ item.commission_money * 1 }}元</view>
						<view class="nterest_sta_box">{{ item.created_at }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup v-model="copupShow" mode="center" :mask-close-able="false">
			<view class="yhq_box">
				<view class="img_box">
					<image :src="copupImg" mode="widthFix" @click="pickBtn" />
				</view>
				<view class="chahao_box" @click="copupGB"></view>
			</view>
		</u-popup>
		<view style="height: 26rpx;"></view>

		<map id="map" @regionchange="mapChange" class="map" custom-style="maps" :show-location="true"
			:latitude="latitude" :longitude="longitude"></map>
	</view>
</template>
<script>
import { mapState } from 'vuex'
// import cardSwiper from "@/components/helang-cardSwiper/helang-cardSwiper"
export default {
	components: {
		// cardSwiper
	},
	computed: {
		...mapState([
			'newhouse', 'newdress', 'newcity'
		])
	},
	data() {
		return {
			noClick: true,//防连点
			copupShow: '',//弹窗
			copupImg: '',//优惠券图片
			coupon_id: '',//优惠券id
			bannerList: [],//轮播
			ldModeList: [],
			// streetList: [],
			streetdId: 1,//沿街   非沿街
			carvalue: '',//预估数量
			zsfsList: [],
			zsfsId: 1,//默认第一个
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			circularizeList: [],
			nowDate: '',
			latitude: '',//经度
			longitude: '',//纬度
			labelHouse: '',// 具体地址
			adressDetail: '',// 地址
			city: '',//当前定位的城市
			fdSelecdId: 1,
			is_show_model: false,
			vehicleList: [],//推荐车型列表
			vehObj: {},//推荐车型展示对象
			dgPrice: '13',//选中的单价
			newCarObj: {},
			whether: false,// 判断缓存是否存在
			officialtext: '', //文案
			according: '',
			imgshow: false,//显示提示


		}
	},
	onReady() {
		/**
		 * 获取经纬度
		 */
		this.getLocation()
		this.mapChange()
		this.updateTabBarBadge()
	},
	onLoad(options) {
		this.checkIsAddedToMyMiniProgram()
		var scene = decodeURIComponent(decodeURIComponent(options.scene))
		this.analysisUrlParam(scene)
		this.getproduct()
		this.getvehicle()
		this.getBanner()
		this.getcategory()
		// this.getposition()
		this.getcommissionList()
		this.updateTabBarBadge()
	},
	onShow() {
		this.updateTabBarBadge()
		if (uni.getStorageSync('USERINFO') != '') {
			this.copupList()
		}
		uni.getStorageInfo({
			success: function (res) {
				if (res.keys.includes('carObj')) {
					this.whether = true
				} else {
					this.whether = false
				}
			}
		});



	},
	methods: {
		closeTjx() {
			this.imgshow = false
		},
		checkIsAddedToMyMiniProgram() {
			let that = this
			uni.checkIsAddedToMyMiniProgram({
				success(res) {
					console.log(res)
					if (res.added) {
						that.imgshow = false
						// 用户已添加小程序的处理逻辑
					} else {
						that.imgshow = true
						setTimeout(() => {
							that.imgshow = false
						}, 10000)
					}
				},
				fail(err) {
					that.Txet = 3
				}
			});
		},
		updateTabBarBadge() {
			this.$Request.post(this.$api.user.infimationStatictisc).then(res => {
				if (res.code == 200) {
					console.log("MAin.js")
					if (res.data.count > 0) {
						let count = JSON.stringify(res.data.count)

						uni.setTabBarBadge({ //显示数字  
							index: 3, //tabbar下标
							text: count, //数字
						})
					} else {
						uni.removeTabBarBadge({
							index: 3
						});
					}
				}
			})
		},
		analysisUrlParam(url) {
			var queryParts = url.slice(url.indexOf("?") + 1).split('&');
			var params = queryParts.length > 0 ? {} : null;
			queryParts.map(function (item) {
				var a = item.split('=')
				params[a[0]] = a[1]
			})
			uni.setStorageSync("pid", params.pid)
		},
		getcommissionList() {
			this.$Request.post(this.$api.user.commissionList).then(res => {
				if (res.code == 200) {
					this.circularizeList = res.data
				}
			})
		},
		// 轮播
		getBanner() {
			this.$Request.post(this.$api.index.banners).then(res => {
				if (res.code == 200) {
					this.bannerList = res.data
				}

			})
		},
		// 方和袋
		getcategory() {
			this.$Request.post(this.$api.index.categoryList).then(res => {
				if (res.code == 200) {
					this.ldModeList = res.data
				}

			})
		},
		// 沿街和非沿街
		// getposition() {
		// 	this.$Request.post(this.$api.index.positionList).then(res => {
		// 		if (res.code == 200) {
		// 			this.streetList = res.data
		// 		}
		// 	})
		// },
		// 装车
		getproduct() {
			this.zsfsList = []
			let data = {
				category_id: this.fdSelecdId
			}
			this.$Request.post(this.$api.index.productList, data).then(res => {
				if (res.code == 200) {
					this.zsfsList = res.data
					this.dgPrice = res.data[0].price
					this.officialtext = res.data[0].content
					this.according = res.data[0].product_name
				}
			})
		},
		getvehicle() {
			this.$Request.post(this.$api.index.vehicleList).then(res => {
				if (res.code == 200) {
					if (JSON.stringify(this.$store.state.carObj) == '{}') {
						this.vehObj = res.data[0]
					} else {
						this.vehObj = this.$store.state.carObj
					}
					this.vehicleList = res.data
				}

			})
		},
		sharePoster() {
			uni.navigateTo({
				url: '/userPage/wallet/wallet?qrcode=' + 1
			})
		},
		bindBlur() {
			if (this.fdSelecdId == 1) {
				if (this.carvalue > 50) {
					uni.showToast({
						title: '最多50袋',
						icon: 'none'
					})
					this.carvalue = 50
				}
			}

		},
		bindInput() {

			// if (this.carvalue <= 70 && this.carvalue >= 60) {
			// 	this.vehObj = this.vehicleList[2]
			// } else if (this.carvalue > 70 && this.carvalue <= 90) {
			// 	this.vehObj = this.vehicleList[0]
			// } else if (this.carvalue > 90) {
			// 	this.vehObj = this.vehicleList[1]
			// }
		},
		// 轮播跳转
		banGo(item) {
			uni.navigateTo({
				url: item.url + '?guide_url=' + item.guide_url + '&title=' + item.title
			})

		},
		// 优惠券列表
		copupList() {
			this.$Request.post(this.$api.index.couponList).then(res => {
				if (res.code == 200) {
				} else if (res.code == 400) {
					this.getCoupon()
				} else {

				}

			})
		},


		// 优惠券
		getCoupon() {
			this.$Request.post(this.$api.index.couponShow).then((res => {
				if (res.code == 200) {
					this.copupShow = true
					this.coupon_id = res.data.id
					this.copupImg = res.data.img_url
				}
			}))

		},
		// 领取优惠券
		pickBtn() {
			let data = {
				coupon_id: this.coupon_id
			}
			this.$Request.post(this.$api.index.couponReceive, data).then(res => {
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.copupShow = false
					}, 600)
				}

			})
		},
		// 关闭优惠券弹窗
		copupGB() {
			this.copupShow = false
		},
		// streetdBtn(item) {
		// 	this.streetdId = item.id
		// 	if (this.streetdId == 1) {
		// 		this.dgPrice = 1
		// 		this.zsfsId = 1
		// 	} else {
		// 		this.zsfsId = 5
		// 		this.dgPrice = 4
		// 	}
		// 	this.getproduct()
		// },
		// 拼车/整车切换
		fdSelecd(item) {
			this.fdSelecdId = item.id
			if (item.id == 1) {
				this.zsfsId = 1
			} else if (item.id == 2) {
				this.zsfsId = 6
			}
			this.getproduct()
		},
		// 更改车型
		remodelBtn(vehObj) {
			uni.navigateTo({
				url: '/orderPage/remodel/remodel?id=' + vehObj.id
			})
		},
		// 预约下单
		carModeBtn() {

			this.$store.state.insterPep = {}
			console.log(this.vehObj)
			if (this.carvalue == '') {
				uni.showToast({
					title: this.fdSelecdId == 1 ? '请输入预估袋数' : '请输入预估车数',
					icon: 'none'
				})
			} else {
				uni.navigateTo({
					url: '/orderPage/reservationDeatil/reservationDeatil?category_id=' + this.fdSelecdId + '&product_id=' + this.zsfsId + '&vehId=' + this.vehObj.id + '&vehimg=' + this.vehObj.img_url + '&vehNmae=' + this.vehObj.name + '&carvalue=' + this.carvalue + '&dgPrice=' + this.dgPrice + '&producttext=' + this.according
				})
			}

		},
		modeBtn(item, index) {
			this.officialtext = item.content
			console.log(item, "item")
			this.dgPrice = item.price
			this.zsfsId = item.id
			this.according = item.product_name
			if (this.fdSelecdId == 2) {
				console.log(this.zsfsId)
				this.vehObj = this.vehicleList[index]
			}

		},

		// 修改地址
		goModif() {
			uni.navigateTo({
				url: '/userPage/adress/modif'
			})
		},
		getLocation() {
			var that = this;
			uni.getLocation({
				isHighAccuracy: true, // 开启地图精准定位
				type: 'gcj02', // 坐标系类型
				success: function (res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
				},
				fail: function (res) {
					console.log('获取定位失败：' + res.errMsg);
				}
			});
		},
		mapChange() {
			let that = this
			uni.createMapContext("map", this).getCenterLocation({
				success(res) {
					that.getPosition(res.latitude, res.longitude)
				}
			})
		},
		getPosition(lat, log) {
			const tMap = new this.TMap({
				key: 'YVYBZ-TUWL4-PTEUN-DAV24-O6AS2-F5FXQ'
			})
			tMap.reverseGeocoder({
				location: {
					latitude: lat,
					longitude: log,
				}, success: (res) => {
					let adreeDetail = res.result.formatted_addresses
					this.adressDetail = adreeDetail.standard_address
					this.labelHouse = adreeDetail.recommend
					this.city = res.result.address_component.city
				}
			})

		}

	}
}
</script>
<style lang="scss" scoped>
/deep/ .u-icon__icon {
	top: -4rpx !important;
}

/deep/.u-mode-center-box {
	background-color: rgba(246, 246, 246, 0) !important;
}

.map {
	width: 1rpx;
	height: 1rpx;
}

.page {
	width: 100vw;
	min-height: 100vh;
	background-color: rgba(245, 245, 245, 1);
	position: relative;

	.tishi_box {
		right: 38rpx;
		top: 176rpx;
		width: 504rpx;
		height: 122rpx;
		position: absolute;
		z-index: 9999;

		.tupian_zs_box {
			width: 100%;
			position: relative;

			image {
				position: absolute;

				width: 100%;
			}

			.chahao_b {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				right: 10rpx;
				top: 70rpx;

				z-index: 99999999999;

			}
		}


	}

	.top_image_box {
		width: 750rpx;
		height: 400rpx;
		position: relative;

		.swiper {
			width: 750rpx;
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.dress_box {
			position: absolute;
			width: 100%;
			height: 80rpx;
			box-sizing: border-box;
			padding-left: 40rpx;
			display: flex;
			top: 106rpx;
			justify-content: flex-start;
			align-items: center;

			.dress_icon {
				width: 26rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.dress_text {
				// width: 200rpx;
				height: 80rpx;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
				font-weight: 600;
				line-height: 80rpx;
			}
		}
	}

	.big_con_box {
		width: 100%;
		background: linear-gradient(180deg, rgba(59, 189, 126, 1) 30.36%, rgba(138, 222, 197, 1) 40.22%, rgba(174, 230, 214, 0) 95.37%);
		margin-bottom: 18rpx;

		.content_box {
			width: 704rpx;
			height: 100%;
			border-radius: 28rpx;
			margin: auto;
			background: rgba(250, 250, 250, 1);



			.Socratic_box {
				width: 100%;
				height: 118rpx;
				background-color: rgba(237, 237, 237, 1);
				border-radius: 28rpx 28rpx 0 0;
				display: flex;
				justify-content: space-between;
				position: relative;
				margin-bottom: 40rpx;

				image {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
				}

				.daizi_box {
					width: 50%;
					height: 118rpx;
					text-align: center;
					line-height: 118rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);

					&.daizi_box_1 {

						position: absolute;
						z-index: 999;
						left: 0;
						top: 0;
					}

					&.daizi_box_2 {
						position: absolute;
						z-index: 999;
						right: 0;
						top: 0;
					}

					.t_jicu {
						font-size: 32rpx;
						font-weight: 700;
						color: rgba(0, 0, 0, 1);
					}

					.line_bnx {
						position: absolute;
						width: 100rpx;
						height: 4rpx;
						opacity: 1;
						background: rgba(26, 194, 121, 1);
						left: 0;
						right: 0;
						bottom: 22rpx;
						margin: auto;

					}
				}
			}

			// .yanjie_box {
			// 	width: 100%;
			// 	height: 118rpx;
			// 	display: flex;
			// 	justify-content: space-between;
			// 	align-items: center;

			// 	.dange_jie_box {
			// 		width: 50%;
			// 		height: 118rpx;
			// 		text-align: center;
			// 		line-height: 118rpx;
			// 		font-size: 30rpx;
			// 		font-weight: 400;
			// 		color: rgba(166, 166, 166, 1);

			// 		.yanjie_lv {
			// 			font-size: 30rpx;
			// 			font-weight: 500;
			// 			color: rgba(26, 194, 121, 1);
			// 		}
			// 	}
			// }

			.fsxz_box {
				width: 100%;
				height: 320rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				margin-bottom: 68rpx;
				align-items: center;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&.fsxz_box2 {
					width: 80%;
					margin: auto;
					margin-bottom: 68rpx;
				}

				.dange_fl_box {
					width: 196rpx;
					height: 316rpx;
					position: relative;

					.top_yuan_box {
						width: 194rpx;
						height: 194rpx;
						border-radius: 50%;
						background-color: #e8fcee;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						display: flex;
						justify-content: center;
						align-items: center;

						&.sel_top_yuan_box {
							border: 2rpx solid rgba(26, 194, 121, 1);
						}

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.bot_fang_box {
						width: 194rpx;
						height: 206rpx;
						position: absolute;
						bottom: 0;
						background-color: rgba(255, 255, 255, 1);
						left: 0;
						border-radius: 0 0 10rpx 10rpx;
						box-sizing: border-box;
						border: 2rpx solid rgba(240, 240, 240, 1);
						padding-left: 24rpx;
						padding-top: 86rpx;

						&.sel_bot_fang_box {
							background: rgba(26, 194, 121, 1);
							border: 2rpx solid rgba(26, 194, 121, 1);
						}

						.ds_mone_df_box {
							height: 31.5rpx;
							font-size: 36rpx;
							font-weight: 700;
							line-height: 31.5rpx;
							color: rgba(255, 141, 26, 1);
							margin-bottom: 16rpx;

							&.sel_ds_mone_df_box {
								color: rgba(255, 255, 255, 1);
							}

							.money_icon {
								font-size: 20rpx;
								font-weight: 400;
								color: rgba(255, 141, 26, 1);

								&.sel_money_icon {
									color: rgba(255, 255, 255, 1);
								}
							}

							.daohuofang_box {
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(56, 56, 56, 1);

								&.sel_daohuofang_box {
									color: rgba(255, 255, 255, 1);
								}
							}

						}

						.zhuang_mode_box {
							height: 29.75rpx;
							font-size: 24rpx;
							font-weight: 400;
							line-height: 33.6rpx;
							color: rgba(56, 56, 56, 1);

							&.sel_zhuang_mode_box {
								color: rgba(255, 255, 255, 1);
							}
						}
					}
				}
			}

			.frang_big_box {
				width: 100%;
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 68rpx;

				.dange_one_box {
					width: 414rpx;
					height: 196rpx;
					position: relative;

					.left_yuan_box {
						position: absolute;
						width: 194rpx;
						height: 194rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 2;
						background-color: #e8fcee;

						&.sel_left_yuan_box {
							border: 2rpx solid rgba(26, 194, 121, 1);
						}

						image {
							width: 80%;
							height: 80%;
							border-radius: 50%;
						}
					}

					.right_fang_box {
						position: absolute;
						width: 314rpx;
						height: 194rpx;
						border-radius: 0 10rpx 10rpx 0;
						background: rgba(255, 255, 255, 1);
						border: 2rpx solid rgba(240, 240, 240, 1);
						right: 0;
						top: 0;
						box-sizing: border-box;
						padding-left: 100rpx;

						&.sel_right_fang_box {

							background: rgba(26, 194, 121, 1);
							border: 2rpx solid rgba(26, 194, 121, 1);
						}

						.right_top_box {
							width: 210rpx;
							position: absolute;
							top: 56rpx;

							.right_qianshu_box {
								width: 100%;
								height: 40rpx;
								font-size: 36rpx;
								font-weight: 700;
								line-height: 40rpx;
								color: rgba(255, 141, 26, 1);
								margin-bottom: 14rpx;

								&.sel_right_qianshu_box {
									color: rgba(255, 255, 255, 1);
								}

								.right_money_icon_box {
									font-size: 20rpx;

									&.sel_right_money_icon_box {
										color: rgba(255, 255, 255, 1);
									}
								}

								.right_dhf_box {
									font-size: 24rpx;
									font-weight: 400;
									line-height: 40rpx;
									color: rgba(56, 56, 56, 1);

									&.sel_right_dhf_box {
										color: rgba(255, 255, 255, 1);
									}
								}
							}

							.right_mode_zhuang_box {
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(56, 56, 56, 1);

								&.sel_right_mode_zhuang_box {
									color: rgba(255, 255, 255, 1);
								}
							}
						}

					}
				}
			}

			.zhuyi_box {
				width: 90%;
				// height: 34rpx;
				/** 文本1 */
				font-size: 24rpx;
				font-weight: 500;
				line-height: 34rpx;
				color: rgba(255, 141, 26, 1);
				text-align: center;
				margin: auto;
				margin-bottom: 28rpx;

			}

			.yugu_box {
				width: 630rpx;
				height: 84rpx;
				opacity: 1;
				border-radius: 22rpx;
				background: rgba(255, 255, 255, 1);
				border: 2rpx solid rgba(229, 229, 229, 1);
				margin: auto;
				margin-bottom: 28rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				white-space: nowrap;
				box-sizing: border-box;
				padding-left: 26rpx;

				input {
					width: 200rpx;
					height: 50rpx;
					color: rgba(56, 56, 56, 1);
					line-height: 50rpx;



				}
			}

			.motorcycle_box {
				width: 630rpx;
				height: 455rpx;
				margin: 44rpx auto;
				box-sizing: border-box;
				padding: 0 14rpx;
				margin-bottom: 39rpx;

				.tjText_box {
					width: 100%;
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: rgba(0, 0, 0, 1);
					margin-bottom: 22rpx;

				}

				.cc_box {
					width: 540rpx;
					height: 350rpx;
					margin: auto;
					margin-bottom: 8rpx;

					image {
						width: 100%;
						// height: 100%;
					}

				}

				.xg_xt_box {
					width: 148rpx;
					height: 54rpx;
					border-radius: 10rpx;
					border: 2rpx solid rgba(229, 229, 229, 1);
					text-align: center;
					line-height: 54rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
					margin: auto;
					margin-top: 5rpx;


				}
			}


			.yongche_box {
				width: 630rpx;
				height: 100rpx;
				background-color: pink;
				margin: auto;
				text-align: center;
				line-height: 100rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				background: rgba(26, 194, 121, 1);
				color: rgba(255, 255, 255, 1);
			}
		}
	}


	.interest_box {
		width: 704rpx;
		height: 280rpx;
		opacity: 1;
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 1);
		margin: auto;
		box-sizing: border-box;
		padding: 30rpx 30rpx 30rpx 20rpx;
		overflow: hidden;
		overflow: auto;



		/* 最外层 */
		.content {
			/* 控制背景颜色 */
			/* 比如本示例总高度为300,每个列占100,那么显示 3 个就正好 */
			/* 再比如总高度为500,每个列占100,那么显示 5 个就正好 */
			/* 总高度 */
			height: 220rpx;


			.peop_big_box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				height: 60rpx;

				.nterest_avater_box {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

				}

				.housan_box {
					width: 590rpx;
					height: 43rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 43rpx;

					.nterest_name_box {
						width: 105rpx;
						height: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
					}

					.nterest_call_box {
						width: 200rpx;
						height: 100%;
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.nterest_sta_box {
						width: 340rpx;
						height: 100%;
						text-align: right;
						font-size: 24rpx;
					}
				}
			}
		}

	}

	.poster_box {
		width: 704rpx;
		border-radius: 28rpx;
		margin: auto;
		margin-bottom: 24rpx;

		image {
			width: 100%;
		}

	}


	.yhq_box {
		width: 586rpx;
		// height: 894rpx;
		margin: auto;

		.img_box {
			width: 586rpx;
			// height: 784rpx;
			margin: auto;
			margin-bottom: 30rpx;

			image {
				width: 100%;
				// height: 100%
			}
		}


		.chahao_box {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin: auto;
			background-image: url('https://rubbish.lwjcg.com/static/order/yxh.png');
			background-size: 100% 100%;
		}
	}
}
</style>